<template lang="pug">
.list
  .list-header
    .list-header-tabs
      el-radio-group(size="small" v-model="tabActive" @change="changeRadio")
        el-radio-button(label="" name="primary") 全部订单
        el-radio-button(label="2") 待发货
        el-radio-button(label="3") 已发货
        el-radio-button(label="4") 已完成
    .list-filter
      header-filter(:filter="filter")
  .list-table
    .list-table-header
      .list-table-title 订单列表
      .list-table-total 共{{total}}条记录
    .list-table-btn
      //- el-button(name="primary" size="small") 导出数据
    .list-table-body
      .table-header
        //- el-checkbox.table-checkAll(v-model="checkedAll", @change="checkAll") 全选
        el-table(
          :data="listHeader"
          style="width: 100%"
          :cell-style="{'fontSize': '14px', 'background': '#363636', 'color': '#fff', 'borderColor': '#686868'}"
          border
          :show-header="false"
        )
          el-table-column(min-width="200", align="center", prop="name")
          el-table-column(min-width="100", align="center", prop="num")
          el-table-column(min-width="150", align="center", prop="note")
          el-table-column(min-width="150", align="center", prop="status")
          el-table-column(min-width="150", align="center", prop="handles")
      .table-list(v-if="orderList.length")
        .table-item(v-for="item in orderList")
          .table-item-header
            //- el-checkbox.table-item-checkAll()
            .table-item-order-sn 订单号：{{item.orderNo}}
            .table-item-order-time 下单时间：{{item.orderDate}}
          el-table(
            style="width: auto",
            border,
            row-key="supplierId",
            :show-header="false",
            :span-method="objectSpanMethod"
            :data="item.detail"
          )
            el-table-column(min-width="200", align="center", prop="materialName")
              template(slot-scope="scope")
                .table-column-item
                  .table-item-img(:style="{ 'background-image': `url(${scope.row.img})` }")
                  .table-item-spec
                    .table-item-name {{scope.row.materialName}}
                    .spec-item(v-for="spec in scope.row.spec")
                      .spec-item-label {{spec.specName}}：
                      .spec-item-value {{spec.specValue}}
            el-table-column(min-width="100", align="center", prop="num")
            el-table-column(min-width="150", align="center", prop="remark")
            el-table-column(min-width="150", align="center", prop="status")
              template(slot-scope="scope")
                .table-column-status
                  .status-txt(v-if="scope.row.status == 2") 待发货
                  .status-txt(v-if="scope.row.status == 3") 已发货
                  .status-txt(v-if="scope.row.status == 4") 已完成
            el-table-column(min-width="150", align="center")
              template(slot-scope="scope")
                .table-column-handles
                  .table-column-btn(v-if="scope.row.status == 2" @click="postDelivery(item)") 去发货
                  .table-column-btn(@click="seeOrderDetail(item)") 订单详情
      .table-list-empty-text(v-else) 未找到符合条件的内容
    .index-pagination
      .pagination-total 共 {{total}} 条
      .pagination-sizes {{pageSize}} 条/页
      el-pagination(
        background
        layout="prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="page"
        @current-change="currentChange"
      )
  delivery-modal(:show="showDialog", :orderId="currentItem.orderId" @close="closeDialog" @success="confirmDialog")
</template>

<script>
import headerFilter from '@/components/headerFilter'
import deliveryModal from '@/components/modal/deliveryModal'
import { getOrderList } from 'api'
export default {
  name: 'orderList',
  components: {
    headerFilter,
    deliveryModal
  },
  data () {
    return {
      checkedAll: false,
      tabActive: '',
      orderList: [],
      total: 0,
      showDialog: false,
      filter: [
        [
          {
            name: '订单号：',
            type: 'default',
            key: 'orderNo',
            orderNo: '',
          },
          {
            name: '品牌：',
            type: 'default',
            key: 'brandName',
            brandName: '',
          },
          {
            name: '下单手机号：',
            type: 'default',
            key: 'mobile',
            mobile: ''
          }
        ],
        [
          {
            name: '下单时间：',
            type: 'date',
            key: 'time',
            time: [],
          },
          {},
          {
            type: 'handle',
            buttons: [
              { name: 'primary', label: '查询', handle: this.search },
              { label: '重置', handle: this.reset }
            ]
          }
        ]
      ],
      listHeader: [ { name: '材料名称', num: '索样数量', note: '订单备注', status: '订单状态', handles: '操作' } ],
      currentItem: {},
      page: 1,
      pageSize: 20
    }
  },
  methods: {
    search () {
      let query = {}
      this.filter.map(row => row.map(v => {
        if (v.key === 'time' && !v[v.key]) v[v.key] = []
        if (v[v.key]) query[v.key] = v[v.key]
      }))
      query['startDate'] = query['time'][0]
      query['endDate'] = query['time'][1]
      Object.keys(query).forEach(v => {
        if (v === 'time' || !query[v]) delete query[v]
      })
      if (this.tabActive) query.status = this.tabActive
      else delete query.status
      this.$router.replace({ name: this.$route.name, query: { ...query, tm: new Date().getTime() } })
    },
    reset () {
      let query = {}
      if (this.tabActive) query.status = this.tabActive
      else delete query.status
      this.$router.replace({ name: this.$route.name, query: { ...query } })
    },
    async initFilter () {
      try {
        this.filter.forEach(row => row.forEach(v => {
          if (v.key === 'time' && this.$route.query['startDate']) {
            v[v.key] = [ this.$route.query['startDate'], this.$route.query['endDate'] ]
          }  else {
            v[v.key] = this.$route.query[v.key] || ''
          }
        }))
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    changeRadio (value) {
      let query = { ...this.$route.query }
      if (value) query.status = value
      else delete query.status
      this.$router.replace({ name: this.$route.name, query: { ...query } })
    },
    postDelivery (row) {
      this.currentItem = row
      this.showDialog = true
    },
    closeDialog () {
      this.currentItem = {}
      this.showDialog = false
    },
    confirmDialog () {
      this.currentItem = {}
      this.showDialog = false
      this.getList()
    },
    currentChange (page) {
      this.$router.replace({ name: this.$route.name, query: { ...this.$route.query, currentPage: page, tm: new Date().getTime() } })
    },
    seeOrderDetail (row) {
      this.$router.push({ name: 'orderDetail', params: { id: row.orderId } })
    },
    checkAll () {},
    async getList () {
      try {
        let query = { ...this.$route.query, currentPage: this.$route.query.currentPage || 1, pageLines: this.pageSize }
        const { ResultSet } = await this.$axios.post(getOrderList, { content: { ...query } })
        this.page = Number(this.$route.query.currentPage) || 1
        this.total = ResultSet.recordNumber
        this.orderList = ResultSet.userData.orderList
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 合并单元格
      if (columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
        if (rowIndex % 100 === 0) {
          return {
            rowspan: 100,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getList()
      vm.initFilter()
    })
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.getList()
    this.initFilter()
  }
} 
</script>

<style type="text/css" lang="scss">
.table-checkAll {
  .el-checkbox__label {
    font-size: 16px !important;
    color: #fff;
  }
}
.table-item-checkAll {
    .el-checkbox__label {
      font-size: 14px !important;
      color: #363636;
    }
  }
</style>

<style lang="scss" scoped>
.list {
  padding: 0 32px 16px;
}
.list-header {
  padding: 32px 24px;
  background: #ffffff;
  border-radius: 4px;
}
.list-header-tabs {
  padding-bottom: 24px;
  border-bottom: 1px solid #CBCBCB;
}
.list-filter {
  margin-top: 24px;
}
.list-table {
  margin-top: 16px;
  padding: 24px;
  background: #ffffff;
  border-radius: 4px;
}
.list-table-header {
  display: flex;
  align-items: flex-end;
}
.list-table-title {
  font-size: 16px;
  font-weight: bold;
  color: #363636;
  margin-right: 16px;
}
.list-table-total {
  font-size: 14px;
  color: #ABABAB;
}
.list-table-btn {
  margin-top: 23px;
}
.list-table-body {
  margin-top: 16px;
}
.table-item {
  margin-top: 16px;
}
.table-item-header {
  display: flex;
  align-items: center;
  padding: 25px;
  background: #F3F3F3;
  font-size: 14px;
  color: #363636;
  border: 1px solid #EBEEF5;
  border-bottom: none;
}
.table-item-order-sn {
  margin-left: 24px;
}
.table-item-order-time {
  margin-left: 24px;
}
.table-header {
  position: relative;
}
.table-checkAll {
  position: absolute;
  left: 10px;
  top: 15px;
  z-index: 99;
}
.table-column-item {
  display: flex;
}
.table-item-img {
  width: 120px;
  height: 80px;
  border-radius: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.table-item-spec {
  margin-left: 20px;
}
.table-item-name {
  font-size: 14px;
  margin-bottom: 13px;
  font-weight: bold;
  color: #363636;
}
.spec-item {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #B7B7B7;
}
.table-column-status {
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-column-handles {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.table-column-btn {
  margin-bottom: 10px;
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 3px;
  background: #fff;
  border: 1px solid #FF2E42;
  color: #FF2E42;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
}
.index-pagination {
  margin-top: 20px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  color: #7A7A7A;
  .pagination-total {
    margin-right: 10px;
  }
  .pagination-sizes {
    margin-right: 10px;
  }
}
.table-list-empty-text {
  padding: 100px 0;
  color: #909399;
  text-align: center;
}
</style>
